/*
 * @描述: 找回密码页面逻辑
 * @版权所有: 广东国星科技有限公司
 * @商业授权: www.mscodecloud.com
 */
import React, { Component } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import Link from 'umi/link';
import router from 'umi/router';
import { Form, Input, Button, Row, Col, message } from 'antd';
import styles from './ForgotPassword.less';

const FormItem = Form.Item;

@connect(({ forgotPassword, loading }) => ({
  forgotPassword,
  submitting: loading.effects['forgotPassword/submit']
}))
@Form.create()
class ForgotPassword extends Component {
  state = {
    imgUrl: '/api/account/captcha/generateImageCaptcha'
  };

  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch } = this.props;
    form.validateFields({ force: true }, (err, values) => {
      if (!err) {
        dispatch({
          type: 'forgotPassword/submit',
          payload: {
            ...values
          }
        }).then(response => {
          if (response.message === 'success') {
            const email = form.getFieldValue('email');
            router.push({
              pathname: '/user/forgotpassword-result',
              state: {
                email
              }
            });
          } else {
            message.warning(response.message);
            this.handleImg();
          }
        });
      }
    });
  };

  handleImg = () => {
    this.setState({ imgUrl: `/api/account/captcha/generateImageCaptcha?${Math.random()}` });
  }

  render() {
    const { form, submitting } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={styles.main}>
        <h3>
          <FormattedMessage id="app.login.retrieve-password" />
        </h3>
        <Form onSubmit={this.handleSubmit}>
          <FormItem>
            {getFieldDecorator('email', {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'validation.email.required' })
                },
                {
                  type: 'email',
                  message: formatMessage({ id: 'validation.email.wrong-format' })
                },
                {
                  max: 100,
                  message: formatMessage({ id: 'validation.email.length' })
                }
              ]
            })(
              <Input size="large" placeholder={formatMessage({ id: 'form.email.placeholder' })} />
            )}
          </FormItem>
          <FormItem>
            <Row gutter={8}>
              <Col span={16}>
                {getFieldDecorator('charCaptcha', {
                  rules: [
                    {
                      required: true,
                      message: formatMessage({ id: 'validation.verification-code.required' })
                    }
                  ]
                })(
                  <Input
                    size="large"
                    maxLength={4}
                    placeholder={formatMessage({ id: 'form.verification-code.placeholder' })}
                  />
                )}
              </Col>
              <Col span={8}>
                <img src={this.state.imgUrl} onClick={this.handleImg} alt={formatMessage({ id: 'form.verification-code.placeholder' })} width="125px" height="40px" />
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button
              size="large"
              loading={submitting}
              className={styles.submit}
              type="primary"
              htmlType="submit"
            >
              <FormattedMessage id="app.common.confirm" />
            </Button>
            <Link className={styles.login} to="/User/Login">
              <FormattedMessage id="app.login.login" />
            </Link>
          </FormItem>
        </Form>
      </div>
    );
  }
}

export default ForgotPassword;
